@charset "UTF-8";
*,
*::before,
*::after {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote {
  margin: 0;
  padding: 0;
}

/* 当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色 */
html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  color: #232323;
  font-size: 1rem;
  line-height: 1;
  font-family: "PingFang", "PingFang SC", "syht", "Microsoft YaHei", "黑体", "宋体", sans-serif;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section, iframe {
  display: block;
}

input,
textarea {
  border: none;
  outline: none;
  background-color: transparent;
}

b,
strong {
  font-weight: bolder;
}

textarea {
  resize: none;
}

input[type=button],
input[type=submit],
input[type=file],
button {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

button {
  border: none;
  border-radius: 0;
}

a:link,
a:visited,
a:hover,
a:active,
a:focus {
  text-decoration: none;
  color: #232323;
}

ul,
li {
  margin: 0;
}

img {
  -o-object-fit: cover;
     object-fit: cover;
}

img, video {
  max-width: 100%;
}

table {
  table-layout: fixed;
  max-width: 100%;
}

td {
  word-wrap: break-word;
  width: auto;
  white-space: break-spaces;
}

/* 360浏览器下点击可能会出现黑框 */
.swiper-button-prev, .swiper-button-next, .swiper-pagination span {
  outline: none;
}


@font-face {
    font-family: 'bold';
    src: url(../font/HarmonyOS_Sans_SC_Bold.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'medium';
    src: url(../font/HarmonyOS_Sans_SC_Medium.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'regular';
    src: url(../font/HarmonyOS_Sans_SC_Regular.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
}

.wh100{
    width: 100%;
    height: 100%;
}

body::-webkit-scrollbar{
    width: 0;
}

html{
    font-size: 16px;
}

.index-container{
    width: 1560px;
    margin-left: auto;
    margin-right: auto;
}

.container-1400{
    width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.ellipsis {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.ellipsis.line2 {
    white-space: inherit;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ellipsis.line3 {
    white-space: inherit;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.ellipsis.line4 {
    white-space: inherit;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.overflow-h{
    overflow: hidden;
    display: block;
    line-height: inherit;
    .word1{
        overflow: initial;
    }
}

.one-h{
    .overflow-h{
        overflow: initial;
        .word1{
            overflow: hidden;
        }
    }
}

.two-h{
    .word1{
        span{
            overflow: hidden;
        }
    }
}

.word1{
    overflow: hidden;
}

.img-hover{
    cursor: pointer;
    &:hover{
        .img{
            img{
                transform: scale(1.1);
            }
        }
    }
    .img{
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            transition: transform 0.6s;
        }
    }
}

.toggle-icon{
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    .toggle-icon-item,.toggle-icon-item::after,.toggle-icon-item::before{
        width: 100%;
        height: .25rem;
        display: block;
        background-color: #000000;
        border-radius: .125rem;
    }
    .toggle-icon-item{
        position: relative;
        transition: .2s .2s top,.2s .2s bottom,.2s transform,0s .2s opacity;
        &::after,&::before{
            content: '';
            position: absolute;
            left: 0;
            transition: inherit;
        }
        &::after{
            top: -0.625rem;
        }
        &::before{
            bottom: -0.625rem;
        }
    }
    &.active{
        .toggle-icon-item{ 
            transform: rotate(45deg);
            transition: .3s top,.3s bottom,.3s .3s transform,0s .3s opacity;
            &::after{
                top: 0;
                transform: rotate(-90deg);
            }
            &::before{
                bottom: 0;
                opacity: 0;
            }
        }
    }
}

.b-eeeeee{
    background-color: #eeeeee;
}

.b-fff{
    background-color: #fff;
}

.section1-top{
    position: relative;
    padding-top: 18.875rem;
    padding-bottom: 11.6875rem;
    overflow: hidden;
    &.section1-top-right{
        padding-bottom: 0;
        .section1-top-hand{
            right: auto;
            left: 0;
            width: 56rem;
            max-width: 46.66%;
            img{
                transform-origin: left bottom;
            }
        }
        .section1-container{
            padding-bottom: 16.875rem;
            border-bottom: .0625rem solid #d9d9d9;
        }
        .section1-right-title{
            font-size: 11.25rem;
            font-family: 'bold';
            line-height: normal;
            margin-bottom: 5rem;
            text-align: right;
        }
        .section1-right-content{
            line-height: 2rem;
            font-family: 'regular';
            width: 54.7857%;
            margin-left: auto;
        }
        .section1-right-img-container{
            position: absolute;
            right: 0;
            bottom: 2.5rem;
        }
        .section1-right-img{
            width: 2rem;
            filter: invert(1);
            transform: rotate(90deg);
        }
    }
    .section1-top-hand{
        width: 63.25rem;
        max-width: 52.7%;
        position: absolute;
        z-index: 1;
        right: 0;
        top: 14.75rem;
        img{
            width: 100%;
            transform: rotate(0deg);
            transform-origin: right bottom;
            transition: transform 1s;
        }
    }
    .section1-top-yellow{
        max-width: 1920px;
        width: 100%;
        // height: 100%;
        position: fixed;
        z-index: 0;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        filter: blur(25px);
    }
    &.active{
        // .section1-top-hand img{
        //     transform: rotate(90deg);
        // }
        .section1-top-yellow-big,.section1-top-yellow-small{
            animation-duration: 8s;
        }
        .section1-top-yellow-big{
            animation-name: yellowBig;
            animation-delay: 2.64s;
        }
        .section1-top-yellow-small{
            animation-name: yellowSmall;
            animation-delay: 0s;
        }
    }
    .section1-top-yellow-big,.section1-top-yellow-small{
        position: absolute;
        background: radial-gradient(56.33% 56.33% at 50% 50%,#fbd753 62%,rgba(248,232,225,0) 100%);
        animation-name: yellowscale;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        animation-duration: 3s;
    }
    .section1-top-yellow-big{
        top: 9rem;
        max-width: 52.5rem;
        max-height: 52.5rem;
        width: 43.75vw;
        height: 43.75vw;
    }
    .section1-top-yellow-small{
        top: 14rem;
        left: 24%;
        max-width: 37rem;
        max-height: 37rem;
        width: 30.83vw;
        height: 30.83vw;
        animation-delay: 2s;
    }
    @keyframes yellowscale {
        50% {
            transform: scale(1.2);
        }
    }
    @keyframes yellowSmall {
        0% {
            left: 24%;
            transform: scale(1);
        }
        33% {
            left: 70%;
            transform: scale(1.5);
        }
        83% {
            left: 0%;
            transform: scale(1);
        }
        100% {
            left: 24%;
            transform: scale(1);
        }
    }
    @keyframes yellowBig {
        0% {
            left: 0%;
            transform: scale(1);
        }
        50% {
            left: 70%;
            transform: scale(1.5);
        }
        100% {
            left: 0%;
            transform: scale(1);
        }
    }
    .section1-container{
        position: relative;
        z-index: 9;
        width: 1400px;
        max-width: 100%;
        margin-left: auto;
        color: #232323;
        margin-right: auto;
    }
    .section1-etitle{
        font-size: 6.25rem;
        font-family: 'medium';
        margin-bottom: 1.125rem;
    }
    .section1-title{
        font-family: 'bold';
        font-size: 8.75rem;
        margin-bottom: 1.625rem;
    }
    .section1-content{
        font-size: 1.25rem;
        min-height: 4rem;
        font-family: 'regular';
        line-height: 2rem;
        margin-bottom: 4.5rem;
    }
    .section1-form-title{
        font-size: .875rem;
        font-family: 'regular';
        margin-bottom: .8125rem;
    }
    .section1-flex{
        display: flex;
    }
    .section1-input{
        width: 23.75rem;
        height: 3.75rem;
        font-size: 1.125rem;
        font-family: 'regular';
        background-color: #ffffff;
        padding: 0 1.625rem;
    }
    .section1-btn{
        width: 7.5rem;
        height: 3.75rem;
        background-color: #fed130;
        margin-left: 1.25rem;
        img{
            width: 1.5rem;
        }
    }
    
}

.my-swiper-button{
    .swiper-button{
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        transition: background-color 0.4s;
        &::after{
            content: '';
        }
        &::before{
            position: absolute;
            content: '';
            width: 1rem;
            height: .6875rem;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transform-origin: right center;
            animation-name: none;
            animation-fill-mode: both;
            animation-duration: 0.8s;
        }
        &:hover{
            background-color: #000000;
            transform: scale(1.2);
            &.swiper-button-prev::before{
                animation-name: swiperButtonPrev;
            }
            &.swiper-button-next::before{
                animation-name: swiperButtonNext;
            }
        }
    }
    .swiper-button-prev{
        &::before{
            background: url(../img/img24.png) no-repeat center center;
            background-size: auto 100%;
        }
    }
    .swiper-button-next{
        &::before{
            background: url(../img/img25.png) no-repeat center center;
            background-size: auto 100%;
        }
    }
    @keyframes swiperButtonNext {
        0% {
            background: url(../img/img27.png) no-repeat right center;
            background-size: auto 100%;
            width: 0;
            left: 0;
            transform: translate(-50%, -50%);
        }
        100% {
            background: url(../img/img27.png) no-repeat right center;
            background-size: auto 100%;
            width: 1rem;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
    @keyframes swiperButtonPrev {
        0% {
            background: url(../img/img26.png) no-repeat left center;
            background-size: auto 100%;
            width: 0;
            left: auto;
            right: 0;
            transform: translate(50%, -50%);
        }
        100% {
            background: url(../img/img26.png) no-repeat left center;
            background-size: auto 100%;
            width: 1rem;
            left: auto;
            right: 50%;
            transform: translate(50%, -50%);
        }
    }
}

.design-children{
    .section1{
        overflow: hidden;
        .top{
            padding-top: 18.125rem;
            padding-bottom: 16.25rem;
            border-bottom: .0625rem solid #babcbd;
            color: #232323;
            position: relative;
            .etitle{
                font-size: 2rem;
                font-family: 'medium';
                line-height: normal;
            }
            p{
                position: relative;
                z-index: 2;
            }
            .title{
                font-size: 7.5rem;
                line-height: 1.3;
                font-family: 'bold';
                margin-bottom: 3rem;
            }
            ul{
                list-style: none;
                font-family: 'regular';
                display: flex;
                flex-wrap: wrap;
                position: relative;
                z-index: 2;
                li{
                    white-space: nowrap;
                    line-height: 1.5rem;
                    margin-right: 3.75rem;
                    &:last-child{
                        margin-right: 0;
                    }
                }
            }
            .img-container{
                position: absolute;
                left: 0;
                bottom: 3.125rem;
            }
            .img{
                width: 2rem;
                height: 2rem;
                cursor: pointer;
                filter: invert(1);
                transform: rotate(90deg);
            }
            .bg{
                position: absolute;
                right: 0;
                top: 20%;
                z-index: 1;
            }
        }
        .bottom{
            min-height: 29rem;
            padding: 3.25rem 0;
            color: #232323;
            display: flex;
            justify-content: space-between;
            font-family: 'regular';
            .left{
                font-size: 1.125rem;
                line-height: 2rem;
            }
            .right{
                width: 46.857%;
                line-height: 2rem;
            }
        }
    }
    .section2{
        color: #232323;
        padding-top: 5.5625rem;
        padding-bottom: 13rem;
        .top{
            display: flex;
            justify-content: space-between;
            margin-bottom: 12.4375rem;
            align-items: flex-start;
        }
        .left{
            font-size: 1.125rem;
            font-family: 'regular';
            line-height: normal;
        }
        .right{
            list-style: none;
            width: 46.785%;
            font-size: 1.5rem;
            line-height: 2rem;
            font-family: 'medium';
            margin-top: -1.875rem;
            &:hover{
                li{
                    color: #dddddd;
                    border-color: #dddddd;
                }
            }
            li{
                padding: 1.625rem 0;
                border-bottom: .0625rem solid #babcbd;
                position: relative;
                cursor: pointer;
                transition: color 0.4s,border-color 0.4s;
                &:hover{
                    color: #232323;
                    border-color: #babcbd;
                    &::before{
                        width: 100%;
                    }
                }
                &::before{
                    position: absolute;
                    content: '';
                    width: 0;
                    height: .125rem;
                    left: 0;
                    bottom: -0.0625rem;
                    transition: width 0.6s;
                    background-color: #fed130;
                }
                & + li{
                    margin-top: 1.875rem;
                }
            }
        }
    }
    .section3{
        padding-top: 6.25rem;
        padding-bottom: 6.25rem;
        position: relative;
        display: flex;
        align-items: flex-start;
        .left{
            position: sticky;
            left: 0;
            top: 12.5rem;
            font-size: 1.25rem;
            color: #232323;
            list-style: none;
            font-family: 'regular';
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            li{
                line-height: 3.125rem;
                position: relative;
                cursor: pointer;
                &:hover,&.active{
                    &::before{
                        width: calc(100% + 2em);
                    }
                }
                span{
                    position: relative;
                    z-index: 1;
                }
                &::before{
                    position: absolute;
                    content: '';
                    width: 0;
                    transition: width 0.4s;
                    height: 0.3125rem;
                    background-color: #fed130;
                    left: 0;
                    top: 50%;
                    z-index: 0;
                    transform: translateY(-50%);
                }
            }
        }
        .right{
            margin-left: auto;
            width: 46.875rem;
            .right-item{
                overflow: initial;
                display: none;
                &.active{
                    display: block;
                }
            }
            .swiper-wrapper{
                flex-direction: column;
            }
        }
    }
}

.logo-list{
    display: flex;
    flex-wrap: wrap;
    .logo-list-item{
        width: 25%;
        padding-top: 25%;
        border: solid 0.0625rem #e7e8e8;
        position: relative;
        img{
            position: absolute;
            width: 85.714%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
    .logoItemIn {
        animation-name: logoItemIn
    }
    @keyframes logoItemIn {
        0% {
            opacity: 0;
            transform: translate(-50%, -50%) scale3d(2, 2, 2);
        }
    
        50% {
            opacity: 1;
            transform: translate(-50%, -50%);
        }
    }
}

.my-list1{
    .item{
        width: 100%;
        display: block;
        background-color: #f5f7fb;
        padding-top: 3.125rem;
        padding-bottom: 2.5rem;
        cursor: pointer;
        transition: border-radius 0.4s;
        &:hover,&.swiper-slide-active{
            border-radius: 1.25rem;
            .info{
                color: #232323;
            }
            .img{
                border-radius: .625rem;
                box-shadow: 0px 0.0625rem 0.75rem 0px rgba(0, 0, 0, 0.2509803922);
                transform: scale(1.05);
            }
        }
        & + .item{
            margin-top: 3.125rem;
        }
        .img{
            width: 40rem;
            display: block;
            margin: 0 auto 5.9375rem;
            transition: border-radius 0.4s,box-shadow 0.4s,transform 0.4s;
            box-shadow: 0px 0.375rem 0.375rem 0px #00000040;
            position: relative;
            padding-top: 48%;
            overflow: hidden;
            img{
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
            }
        }
        .info{
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 0 1.875rem;
            font-size: .875rem;
            font-family: 'regular';
            transition: color 0.4s;
            color: #a3a3a3;
        }
    }
}

.animated{
    transform: translateZ(0);
}

.index-btn,a.index-btn{
    background-color: #232323;
    text-align: center;
    color: #fff;
    transition: all 0.4s;
    font-family: 'regular';
    &:hover{
        border-radius: 1.5625rem;
        background-color: #facf00;
        color: #333;
    }
}

.custom-cursor{
    position: fixed;
    width: 2.5rem;
    height: 2.5rem;
    top: 0;
    left: 0;
    z-index: 9;
    background-color: #232323;
    border-radius: 50%;
    pointer-events: none;
    animation-name: cursorAni;
    animation-fill-mode: both;
    animation-duration: 0.4s;
    transform: translate3d(0, 0, 0);
    &::before{
        position: absolute;
        content: '';
        width: 1rem;
        height: .6875rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform-origin: right center;
        animation-name: swiperButtonNext;
        animation-fill-mode: both;
        animation-delay: 0.2s;
        animation-duration: 0.4s;
        background: url(../img/img27.png) no-repeat center center;
        background-size: auto 100%;
    }
    @keyframes cursorAni {
        0% {
            transform: scale(0.5);
        }
        100% {
            transform: scale(1.2);
        }
    }
}

.modal{
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    padding: 0 2.625rem;
    overflow: hidden;
    background-color: rgba($color: #000000, $alpha: 0.5);
    .modal-mask{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .modal-container{
        position: relative;
        height: 100%;
        width: 100%;
        overflow-y: scroll;
        padding: 5vh 0;
        text-align: center;
        &::-webkit-scrollbar{
            display: none;
        }
        &::after{
            content: '';
            display: inline-block;
            height: 100%;
            width: 0;
            vertical-align: middle;
        }
        .modal-main{
            display: inline-block;
            vertical-align: middle;
        }
    }
    .honor{
        height: 100%;
        display: flex;
        align-items: center;
        .swiper{
            overflow: initial;
            width: 100%;
        }
        .swiper-slide{
            width: auto;
            text-align: center;
            color: #fff;
        }
        .swiper-slide-active{
            .img-container::before{
                opacity: 0;
            }
            .slide-text{
                color: #fff;
            }
        }
        .img-container{
            position: relative;
            &::before{
                position: absolute;
                content: '';
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #000000;
                opacity: 0.5;
                transition: opacity 0.3s;
            }
        }
        .slide-img{
            height: 37.5rem;
            max-width: 53.125rem;
            display: block;
        }
        .slide-text{
            font-family: 'regular';
            margin-top: 2.1875rem;
            color: #666666;
            transition: color 0.3s;
        }
    }
}

header{
    background-color: #ffffff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    width: 100%;
    border-bottom: none;
    --header-color: #232323;
    transition: background-color 0.4s;
    box-shadow: 0px 0.375rem 1.25rem #0000001c;
    &.active{
        background-color: transparent;
        --header-color: #232323;
        border-bottom: 1px solid #babcbd;
        box-shadow: none;
        &.index-header{   
            border-bottom: 1px solid rgba($color: #ffffff, $alpha: 0.5);
            --header-color: #fff;
        }
    }
    &.index-header{
        nav .nav-link::before{
            background-color: var(--header-color);
        }
    }
    .header-container{
        position: relative;
        height: 6.25rem;
        width: 1760px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .header-container-left{
        display: flex;
        align-items: center;
        .left-logo{
            width: 11.375rem;
        }
        .left-text{
            font-size: .875rem;
            color: var(--header-color);
            transition: color 0.4s;
            padding-left: 1.8125rem;
            position: relative;
            margin-left: 1.75rem;
            font-family: 'regular';
            &::before{
                position: absolute;
                content: '';
                width: 1px;
                height: 1.875rem;
                background-color: var(--header-color);
                transition: background-color 0.4s;
                opacity: 0.5;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }
    nav{
        display: flex;
        align-items: center;
        .nav-item{
            font-size: 1rem;
            font-family: 'regular';
            margin: 0 1.875rem;
            position: relative;
            &:first-child{
                margin-left: 0;
            }
            &:last-child{
                margin-right: 0;
            }
        }
        .nav-link{
            color: var(--header-color);
            transition: color 0.4s;
            position: relative;
            &::before{
                position: absolute;
                content: '';
                width: 100%;
                left: 50%;
                transform: translateX(-50%) scale3d(0, 1, 0);
                transform-origin: left center;
                transition: transform 0.4s;
                height: 0.25rem;
                background-color: #fed130;
                border-radius: 0.125rem;
                bottom: -0.8125rem;
            }
            &.active,&:hover{
                &::before{
                    transform: translateX(-50%) scale3d(1, 1, 1);
                }
            }
        }
    }
    .header-container-h5{
        height: 6.25rem;
        display: none;
        .left{
            display: block;
            width: 11.375rem;
        }
        .right{
            cursor: pointer;
        }
        .nav{
            height: calc(100vh - 6.25rem);
            overflow: hidden;
            position: absolute;
            width: 100vw;
            left: 0;
            top: 6.25rem;
            background-color: rgba(0, 0, 0, 0.5);
            animation-name: none;
            animation-duration: 0.4s;
            animation-fill-mode: both;
            visibility: hidden;
            &.active{
                visibility: visible;
                animation-name: navIn;
            }
            @keyframes navIn {
                0%{
                    opacity: 0.3;
                    transform: translate3d(0, 0.9375rem, 0);
                }
                100%{
                    opacity: 1;
                    transform: translate3d(0, 0, 0);
                }
            }
            .nav-container{
                border-top: 1px solid #dbdbdb;
                background-color: #fff;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 1.25rem 0;
                .nav-item{
                    width: 100%;
                    text-align: center;
                    font-size: 1.75rem;
                    padding: 1.25rem 0;
                    font-family: 'medium';
                }
                >ul{
                    list-style: none;
                    .link{
                        display: flex;
                        padding: 0 2.625rem;
                    }
                    .link-arrow{
                        width: 5%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        &.active{
                            img{
                                transform: rotate(90deg);
                            }
                        }
                        img{
                            width: 1rem;
                            height: 1.75rem;
                            transform: rotate(-90deg);
                            transition: transform 0.4s;
                        }
                    }
                    .links{
                        display: none;
                        padding-left: 2.5em;
                        background-color: #ededed;
                        &.active{
                            display: block;
                        }
                        .links-item{
                            font-size: 1.5rem;
                            line-height: 3.5rem;
                        }
                    }
                    li{
                        font-size: 1.75rem;
                        line-height: 4.5rem;
                        border-bottom: 1px solid #dbdbdb;
                        a{
                            display: block;
                            width: 100%;
                            height: 100%;
                            font-family: 'regular';
                        }
                    }
                }
            }
        }
    }
}

footer{
    position: relative;
    background-color: #232323;
    .footer-info{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 7.5rem;
        border-bottom: 1px solid #363636;
    }
    .footer-logo{
        display: flex;
        align-items: flex-end;
    }
    .footer-logo-img{
        width: 13.4375rem;
    }
    .footer-logo-text{
        color: #fff;
        font-family: 'regular';
        margin-bottom: .875rem;
        margin-left: 2.875rem;
    }
    .footer-tel{
        color: #ededed;
        font-family: 'medium';
        font-size: 2.5rem;
        margin-top: 1.25rem;
    }
    .footer-container{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-top: 3.75rem;
        padding-bottom: 6.75rem;
    }
    .footer-code{
        width: 7.5rem;
        height: 7.5rem;
        margin-right: 1.6875rem;
    }
    .footer-left{
        display: flex;
        color: #a3a3a3;
        line-height: 1.5rem;
        font-size: .875rem;
    }
    .footer-list{
        display: flex;
        font-family: 'regular';
        flex-direction: column;
        justify-content: space-between;
    }
    .footer-nav{
        display: flex;
        .footer-nav-item{
            list-style: none;
            & + .footer-nav-item{
                margin-left: 5.5rem;
            }
            a{
                color: #a3a3a3;
                font-size: .875rem;
                font-family: 'regular';
                line-height: 2rem;
            }
            li{
                &:first-child a{
                    color: #fff;
                    line-height: 1;
                    margin-bottom: 1.3125rem;
                    display: block;
                    font-size: 1rem;
                }
            }
        }
    }
    .footer-bottom{
        line-height: 2.5rem;
        background-color: #282828;
        color: #888888;
        text-align: center;
        font-size: .75rem;
        padding: 0 2.625rem;
    }
}

.index{
    background-color: #eeeeee;
    .section1{
        width: 100%;
        position: relative;
        padding-top: (1080 / 1920 * 100%);
        .swiper{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .swiper-pagination{
            bottom: 1.5rem;
            .swiper-pagination-bullet{
                width: 4rem;
                height: 0.5rem;
                background-color: #ffffff;
                border-radius: 0.25rem;
                opacity: 0.5;
                transition: opacity 0.4s;
                &.swiper-pagination-bullet-active{
                    opacity: 1;
                }
            }
        }
    }
    .section2{
        padding-top: 6.6875rem;
        .title-top{
            font-size: 2rem;
            line-height: 3.5rem;
            text-align: center;
            font-family: 'regular';
            margin-bottom: 8.4375rem;
        }
        .list{
            width: 1400px;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        .item{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 1.1875rem;
            border-bottom: 0.0625rem solid #babcbd;
            position: relative;
            & + .item{
                margin-top: 2.875rem;
            }
            .title{
                font-size: 3rem;
                color: #232323;
                font-family: 'bold';
                margin-bottom: 1.6875rem;
            }
            .text{
                font-size: 1.25rem;
                line-height: 2rem;
                font-family: 'regular';
            }
            .link{
                width: 12.5rem;
                line-height: 3.125rem;
                margin-right: 14rem;
                margin-left: 1.25rem;
                flex-shrink: 0;
                &:hover{
                    &::before{
                        width: 100%;
                    }
                }
                &::before{
                    position: absolute;
                    content: '';
                    width: 0;
                    transition: width 0.8s ease-in-out;
                    height: .125rem;
                    background-color: #facf00;
                    left: 0;
                    bottom: -0.0625rem;
                }
            }
        }
    }
    .light-conhtainer{
        position: relative;
        section{
            position: relative;
            z-index: 1;
        }
        .section3-container{
            .title-top{
                font-size: 7.5rem;
                color: #232323;
                text-align: center;
                font-family: 'bold';
                line-height: normal;
                padding-top: 7.5rem;
                margin-bottom: 5.625rem;
                transition: all 0.4s;
                &.active{
                    font-size: 4rem;
                    margin: 0;
                    padding: 0;
                }
            }
        }
        .title-top-type2{
            display: none;
        }
        .light-list{
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 0;
        }
        .light-item{
            position: sticky;
            overflow: hidden;
        }
        .light-yellow{
            width: 39.6875rem;
            height: 56.25rem;
            top: 0;
            left: 0;
            transform: translateY(-4.0625rem);
            filter: blur(29px);
            .light-bg{
                position: absolute;
                right: 0;
                width: 56.25rem;
                height: 56.25rem;
                background: radial-gradient(50% 50% at 50% 50%,#fce14e 40%,rgba(248,232,225,0) 100%);
            }
        }
        .light-blue{
            width: 25rem;
            height: 37.5rem;
            top: 46.875rem;
            right: 0;
            margin-left: auto;
            filter: blur(29px);
            .light-bg{
                width: 37.5rem;
                height: 37.5rem;
                background: radial-gradient(50% 50% at 50% 50%,#3151f3 40%,rgba(248,232,225,0) 100%);
            }
        }
        .section3-sticky{
            position: sticky;
            top: 6.25rem;
            left: 0;
            overflow: hidden;
        }
    }
    .section3{
        width: 1760px;
        margin-left: auto;
        margin-right: auto;
        &.active{
            height: calc(100vh - 6.25rem);
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .title-top-type1{
                display: none;
            }
            .title-top-type2{
                display: block;
            }
        }
        .swiper{
            overflow: initial;
        }
        .swiper-slide{
            display: flex;
        }
        .slide-img{
            width: 68.181%;
            height: 40rem;
            margin-right: 2.375rem;
            flex-shrink: 0;
        }
        .slide-info{
            flex-grow: 1;
            width: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            &:hover{
                .slide-link{
                    border-radius: 1.5625rem;
                    background-color: #facf00;
                    color: #333;
                }
            }
        }
        .slide-title{
            margin-top: 1.8125rem;
            font-family: 'regular';
            color: #232323;
        }
        .slide-text1{
            margin-bottom: 1.1875rem;
        }
        .slide-text2{
            font-size: 2.5rem;
            font-family: 'medium';
        }
        .slide-link{
            width: 12.5rem;
            line-height: 3.125rem;
            text-align: center;
            color: #fff;
            font-family: 'regular';
            background-color: #232323;
            margin-bottom: 1.25rem;
            flex-shrink: 0;
            transition: all 0.4s;
        }
    }
    .section4{
        margin-top: 7.0625rem;
        height: 40rem;
        display: flex;
        justify-content: space-between;
        margin-bottom: 13.125rem;
        .left{
            background-position: left center;
        }
        .right{
            background-position: right center;
        }
        .item{
            width: 0;
            flex-grow: 1;
            transition: all 0.4s;
            overflow: hidden;
            position: relative;
            background-repeat: no-repeat;
            background-size: cover;
            & + .item{
                margin-left: 3.846%;
            }
            &:hover{
                width: 58.974%;
                flex-grow: 0;
                border-radius: 1.25rem;
                .info{
                    opacity: 1;
                }
            }
        }
        .link{
            position: absolute;
            left: 50%;
            top: 50%;
            color: #fff;
            display: flex;
            transform: translate(-50%, -50%);
            align-items: center;
            font-size: 1.5rem;
            white-space: nowrap;
            font-family: 'regular';
            img{
                width: 2.5rem;
                height: 2.5rem;
                margin-left: 1.25rem;
            }
        }
        .info{
            position: absolute;
            left: 3.0625rem;
            bottom: 2rem;
            color: #fff;
            line-height: 2rem;
            font-family: 'regular';
            opacity: 0;
            transition: opacity 0.4s;
        }
    }
    .section5{
        overflow: hidden;
        margin-bottom: 10.625rem;
        .title-top{
            display: flex;
            justify-content: space-between;
            margin-bottom: 9.375rem;
            .left{
                font-size: 7.5rem;
                font-family: 'bold';
                color: #232323;
            }
            .right{
                width: 49.1%;
            }
            .content{
                line-height: 2rem;
                color: #232323;
                font-family: 'regular';
                margin-bottom: 6.875rem;
            }
            .num{
                display: flex;
                align-items: flex-end;
                color: #232323;
                .counter{
                    font-size: 6.25rem;
                    font-family: 'bold';
                }
                div{
                    font-size: 1.125rem;
                    line-height: 1.875rem;
                    margin-left: 1rem;
                    margin-bottom: .3125rem;
                    font-family: 'regular';
                }
            }
        }
        .swiper{
            padding-top: 5rem;
            height: 32.5rem;
            overflow: initial;
        }
        .swiper-wrapper{
            perspective: 1800px;
        }
        .swiper-slide{
            background-color: #fff;
            width: 35rem;
            margin-right: 3.75rem;
            transition: border-radius 0.4s;
            &:last-child{
                margin-right: 0;
            }
            &:hover{
                border-radius: 1.25rem;
                color: #fff;
                .slide-info img{
                    filter: invert(1);
                }
            }
        }
        .slide-img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 17.5rem;
            height: 17.5rem;
        }
        .slide-info{
            position: absolute;
            display: flex;
            justify-content: space-between;
            align-items: center;
            left: 0;
            bottom: 1.375rem;
            width: 100%;
            padding: 0 2.5rem;
            p{
                font-family: 'regular';
                color: #232323;
                flex-grow: 1;
                width: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: normal;
            }
            img{
                flex-shrink: 0;
                margin-left: 1.25rem;
                width: 1.875rem;
                height: 1.875rem;
                transition: filter 0.4s;
            }
        }
        .swiper-button{
            top: 0;
            left: auto;
            right: auto;
            &.swiper-button-next{
                left: 3.75rem;
            }
        }
    }
    .section6{
        padding-bottom: 11.875rem;
        overflow: hidden;
        .title-top{
            font-size: 7.5rem;
            font-family: 'bold';
            text-align: center;
            color: #232323;
        }
        .swiper{
            padding-top: 4.6875rem;
            overflow: initial;
        }
        .item{
            background-color: #fff;
            color: #232323;
            overflow: hidden;
            transition: border-radius 0.4s,transform 0.4s;
            &:hover{
                border-radius: 1.25rem;
                transform: translateY(-0.625rem);
            }
        }
        .slide-img{
            width: 100%;
            position: relative;
            padding-top: 75%;
            img{
                position: absolute;
                top: 0;
                left: 0;
            }
        }
        .slide-info{
            padding: 2.1875rem 2.5rem 1.8125rem;
        }
        .slide-title{
            font-size: 1.25rem;
            line-height: 2rem;
            height: 4rem;
            margin-bottom: 3.5rem;
            font-family: 'bold';
        }
        .slide-time{
            font-family: 'regular';
        }
    }
}

.design{
    .section2{
        position: relative;
        padding-bottom: 17.5rem;
        overflow: hidden;
        .item{
            cursor: pointer;
            background-color: rgba($color: #ffffff, $alpha: 0.3);
            height: 35rem;
            padding: 5rem;
            display: flex;
            justify-content: space-between;
            transition: background-color 0.4s,border-radius 0.4s;
            &:hover{
                background-color: rgba($color: #ffffff, $alpha: 0.8);
                border-radius: .625rem;
                .index-btn,a.index-btn{
                    border-radius: 1.5625rem;
                    background-color: #facf00;
                    color: #333;
                }
                .img{
                    img{
                        animation: imgAni 3s infinite;
                    }
                }
            }
            @keyframes imgAni {
                50% {
                    transform: translate3d(-0.5rem,0.8125rem,0);
                }
            }
            & + .item{
                margin-top: 6.25rem;
            }
            &:nth-of-type(2n){
                .info{
                    align-items: flex-end;
                    order: 2;
                }
            }
        }
        .info{
            max-width: 60%;
            height: 100%;
            display: flex;
            flex-direction: column;
            color: #232323;
            flex-shrink: 0;
        }
        .title{
            font-size: 2rem;
            line-height: 2.5rem;
            font-family: 'medium';
            margin-bottom: .6875rem;
        }
        .text{
            font-size: .875rem;
            line-height: 1.25rem;
            font-family: 'regular';
            margin-bottom: 2.9375rem;
        }
        .link{
            width: 12.5rem;
            line-height: 3.125rem;
        }
        .overflow-h{
            margin-top: auto;
        }
        ul{
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            li{
                font-size: 1.125rem;
                font-family: 'regular';
                white-space: nowrap;
                margin-right: 3.125rem;
                line-height: 1.5;
                &:last-child{
                    margin-right: 0;
                }
            }
        }
    }
}

.brand{
    .section1 .top .bg{
        right: -5.875rem;
        width: 45.875rem;
    }
}

.interface{
    .section1 .top .bg{
        width: 33.3125rem;
        top: 18rem;
    }
}

.marketing{
    .section1 .top .bg{
        width: 42.875rem;
        top: 14.6875rem;
        right: -1.4375rem;
    }
}

.function{
    .section2{
        padding-bottom: 7.5rem;
        position: relative;
        color: #232323;
        overflow: hidden;
        .item{
            display: flex;
            justify-content: space-between;
            & + .item{
                margin-top: 3.75rem;
            }
            &:nth-of-type(2n){
                .left{
                    order: 2;
                }
            }
        }
        .left{
            width: 48.7179%;
            background-color: #fff;
            padding-top: 2.875rem;
            padding-bottom: 5.625rem;
            display: flex;
            flex-direction: column;
        }
        .left-info{
            padding: 0 10.5263%;
        }
        .left-etitle{
            font-size: 3rem;
            font-family: 'bold';
            margin-bottom: 3.6875rem;
        }
        .left-title{
            font-size: 2.25rem;
            line-height: 1.5;
            font-family: 'regular';
            margin-bottom: .375rem;
        }
        .right-text{
            font-size: 1.5rem;
            line-height: 1.5;
            font-family: 'medium';
            margin-bottom: 1rem;
        }
        .left-content,.right-content{
            font-family: 'regular';
            line-height: 1.75rem;
        }
        .left-img{
            width: 89%;
            max-height: 28.125rem;
            display: block;
            margin: auto auto 0;
        }
        .index-btn{
            width: 12.5rem;
            line-height: 3.125rem;
            display: block;
            margin-top: 2.1875rem;
            margin-bottom: 6.125rem;
        }
        .right{
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .right-flex{
            display: flex;
            justify-content: space-between;
            height: 13.75rem;
            margin-bottom: 1.25rem;
            flex-shrink: 0;
        }
        .right-small{
            width: 48.7179%;
        }
        .right-big{
            height: 13.75rem;
            margin-bottom: 1.25rem;
            flex-shrink: 0;
        }
        .right-small,.right-big{
            background-color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 1.5rem 3.8461% 1.75rem;
        }
        .right-bottom{
            flex-grow: 1;
            background-color: #fff;
            width: 100%;
            .swiper-slide{
                padding: 3.125rem 8.9743% 0;
            }
            img{
                width: 100%;
                height: 79.4701%;
                border-radius: .625rem;
                box-shadow: 0px 0.0625rem 0.75rem 0px rgba(0, 0, 0, 0.2509803922);
            }
            .swiper-pagination{
                bottom: 7.947%;
            }
            .swiper-pagination-bullet{
                width: 2rem;
                height: 0.5rem;
                background-color: #232323;
                border-radius: 0.25rem;
                opacity: 0.5;
                transition: all 0.4s;
            }
            .swiper-pagination-bullet-active{
                width: 4rem;
                opacity: 1;
            }
        }
    }
}

.function_detail{
    .section1{
        margin-top: 18.125rem;
        margin-bottom: 2.5rem;
        .etitle{
            font-size: 2rem;
            font-family: 'medium';
            margin-bottom: 1.25rem;
        }
        .title{
            font-size: 7.5rem;
            font-family: 'bold';
        }
    }
    .section2{
        position: relative;
        .selects{
            top: 6.25rem;
            padding-top: 6.25rem;
            position: sticky;
            z-index: 9;
            background-color: #fff;
            left: 0;
            display: flex;
            flex-wrap: wrap;
            padding-bottom: .875rem;
            border-bottom: 0.0625rem solid #babcbd;
        }
        .selects-item{
            min-width: 8.75rem;
            line-height: 2.5rem;
            padding: 0 1.25rem;
            margin-right: 1.25rem;
            margin-bottom: 1.25rem;
        }
        .list{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding-top: 5rem;
            padding-bottom: 7.5rem;
        }
        .item{
            width: 47.8571%;
            margin-top: 0;
            margin-bottom: 2.5rem;
            padding-bottom: 1.5rem;
            .img{
                max-width: 90%;
                width: 36.1875rem;
                margin: 0 auto 5.625rem;
            }
        }
    }
}

.certificate{
    .section2{
        position: relative;
        color: #232323;
        overflow: hidden;
        .index-container{
            border-top: 0.0625rem solid #d9d9d9;
            border-bottom: 0.0625rem solid #d9d9d9;
            padding-bottom: 11.25rem;
        }
        .top{
            display: flex;
            margin-bottom: 3.5rem;
            >div{
                flex: 1;
            }
        }
        .top-left{
            padding-top: 4rem;
        }
        .top-title{
            font-size: 3rem;
            font-family: 'medium';
            margin-bottom: .75rem;
        }
        .top-text{
            font-size: 1.125rem;
            font-family: 'regular';
            line-height: 1.5;
        }
        .top-item{
            display: flex;
            align-items: center;
            height: 6.875rem;
            border-bottom: .0625rem solid #d9d9d9;
            cursor: pointer;
            transition: background-color 0.4s;
            &:hover,&.active{
                background-color: #fff;
                .top-num{
                    padding-left: 5.1282%;
                }
                .top-img{
                    transform: rotate(-225deg);
                    margin-right: 8.9743%;
                }
            }
        }
        .top-num{
            width: 14.1025%;
            font-size: 1.5rem;
            font-family: 'medium';
            transition: all 0.4s;
            flex-shrink: 0;
        }
        .top-content{
            flex-grow: 1;
            width: 0;
            font-size: 2.25rem;
            line-height: normal;
            font-family: 'medium';
        }
        .top-img{
            width: 1.375rem;
            transform: rotate(-45deg);
            margin: 0 3.8461%;
            flex-shrink: 0;
            transition: margin-right 0.2s,0.2s transform 0.2s;
        }
        .swiper{
            overflow: initial;
            padding-top: 5rem;
            display: none;
            &.active{
                display: block;
            }
        }
        .swiper-button{
            top: 0;
            margin-top: 0;
        }
        .swiper-button-prev{
            left: 0;
        }
        .swiper-button-next{
            left: 3.75rem;
        }
        .swiper-slide{
            width: 25rem;
            height: 15rem;
            background-color: #ffffff;
            margin-right: 1.875rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 2.125rem 1.875rem 3.3125rem;
            &:last-child{
                margin-right: 0;
            }
        }
        .bottom-title{
            font-size: 1.5rem;
            line-height: normal;
            font-family: 'medium';
        }
        .bottom-text{
            line-height: 1.75rem;
            font-family: 'regular';
        }
    }
    .section3{
        position: relative;
        padding-top: 6.5rem;
        padding-bottom: 16.875rem;
        color: #232323;
        .title{
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 3.75rem;
            .text1{
                font-size: 3rem;
                font-family: 'medium';
                margin-bottom: .75rem;
            }
            .text2{
                font-size: 1.25rem;
                font-family: 'regular';
                line-height: 2rem;
            }
            .link{
                width: 12.5rem;
                line-height: 3.125rem;
            }
        }
        .bottom{
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        .left{
            display: flex;
            flex-wrap: wrap;
            width: 41.1%;
            border-radius: .625rem;
            border: solid 0.0625rem #d9d9d9;
            border-bottom: none;
            overflow: hidden;
        }
        .left-item{
            width: 50%;
            height: 12.5rem;
            background-color: #fff;
            padding: 2.0625rem 6.25% 0;
            border-bottom: solid 0.0625rem #d9d9d9;
            &:nth-of-type(2n){
                border-left: solid 0.0625rem #d9d9d9;
            }
        }
        .left-title{
            font-size: 1.25rem;
            font-family: 'medium';
            margin-bottom: 1.875rem;
        }
        .left-text{
            font-size: .875rem;
            line-height: 1.5rem;
            font-family: 'regular';
        }
        .list{
            overflow: auto;
            width: 50%;
            max-height: 25rem;
            &::-webkit-scrollbar{
                background-color: transparent;
                width: .1875rem;
            }
            &::-webkit-scrollbar-thumb{
                background-color: #fed130;
                width: .1875rem;
            }
        }
        .list-item{
            display: flex;
            align-items: center;
            font-family: 'regular';
            line-height: normal;
            border-bottom: .0625rem solid #d9d9d9;
            min-height: 4.625rem;
            padding: .625rem 0;
            position: relative;
            transition: font-size 0.3s ease;
            &:hover{
                font-size: 1.3em;
                &::before{
                    width: 100%;
                }
            }
            &::before{
                position: absolute;
                content: '';
                width: 0;
                transition: width 0.6s;
                height: .125rem;
                left: 0;
                bottom: -0.0625rem;
                background-color: #fed130;
            }
            & + .list-item{
                margin-top: .4375rem;
            }
        }
    }
}

.about{
    .section2{
        color: #232323;
        position: relative;
        padding-top: 7.5rem;
        padding-bottom: 10rem;
        .link{
            width: 12.5rem;
            line-height: 3.125rem;
            display: block;
            margin-top: 6.25rem;
            cursor: pointer;
        }
        .list-item{
            display: flex;
            & + .list-item{
                margin-top: 3.125rem;
            }
        }
        .item{
            display: flex;
            min-width: 26.25rem;
            align-items: flex-end;
        }
        .counter{
            font-size: 6.25rem;
            font-family: 'bold';
            margin-right: 1.125rem;
        }
        .text{
            font-size: 1.125rem;
            font-family: 'regular';
            line-height: 1.875rem;
            margin-bottom: 0.5rem;
        }
    }
    .section3{
        padding-top: 10.0625rem;
        padding-bottom: 12.4375rem;
        color: #232323;
        position: relative;
        .container-1400{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .left{
            text-align: right;
        }
        .title{
            font-family: 'regular';
            margin-bottom: .875rem;
        }
        .text{
            font-size: 2rem;
            font-family: 'bold';
        }
        .img{
            width: 750 / 1400 * 100%;
            padding-top: 560 / 1400 * 100%;
            position: relative;
            margin-left: 3.9285%;
            margin-right: 3.2142%;
            box-shadow: 0px 0.5625rem 0.5625rem 0px rgba(205, 206, 207, 0.5);
            img{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }
        }
        .right{
            font-size: 1.5rem;
            line-height: 2rem;
            font-family: 'regular';
        }
    }
    .section4{
        overflow: hidden;
        padding-top: 9.8125rem;
        padding-bottom: 16.25rem;
        .swiper{
            overflow: initial;
        }
        .swiper-slide{
            width: 46.875rem;
            padding-right: 3.75rem;
            box-sizing: content-box;
            &:last-child{
                padding-right: 0;
            }
        }
        .item{
            background-color: #fff;
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            height: 30rem;
        }
        .title{
            font-size: 2rem;
            font-family: 'bold';
            margin-bottom: 4.375rem;
            flex-shrink: 0;
        }
        ul{
            list-style: none;
            flex-grow: 1;
            height: 0;
            overflow: auto;
            &::-webkit-scrollbar{
                background-color: transparent;
                width: .1875rem;
            }
            &::-webkit-scrollbar-thumb{
                background-color: #fed130;
                width: .1875rem;
            }
        }
        li{
            display: flex;
            & + li{
                margin-top: 2.625rem;
            }
        }
        .year{
            font-size: 2rem;
            font-family: 'bold';
            margin-right: 1.5rem;
        }
        .text{
            font-family: 'regular';
            line-height: 2rem;
            margin-top: 0.3125rem;
        }
    }
}

.secure{
    .section2{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-top: 0.0625rem solid #d9d9d9;
        position: relative;
        color: #232323;
        padding-bottom: 9.375rem;
        overflow: hidden;
        .left{
            margin-top: 4.0625rem;
        }
        .left-title{
            font-family: 'medium';
            font-size: 3rem;
            margin-bottom: .625rem;
        }
        .left-text{
            font-size: 1.125rem;
            font-family: 'regular';
            line-height: 1.5;
        }
        .right{
            width: 50%;
        }
        .right-item{
            cursor: pointer;
            &.active{
                .right-img{
                    img{
                        transform: rotate(90deg);
                        filter: none;
                    }
                }
                .right-flex{
                    border-color: #000000;
                }
            }
        }
        .right-flex{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 6.875rem;
            border-bottom: .0625rem solid #d9d9d9;
            transition: border-color 0.4s;
        }
        .right-flex-title{
            font-size: 2.25rem;
            font-family: 'medium';
        }
        .right-img{
            width: 2.0625rem;
            height: 2.0625rem;
            background-color: #232323;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                transition: all 0.4s;
                width: 50%;
                transform: rotate(-90deg);
                filter: grayscale(1) brightness(3);
            }
        }
        ul{
            list-style: none;
            margin: 1.875rem 0;
            display: none;
        }
        li{
            padding: 1.6875rem 0;
        }
        .right-title{
            font-size: 1.25rem;
            font-family: 'regular';
            line-height: 2rem;
        }
        .right-text{
            font-size: .875rem;
            font-family: 'regular';
            line-height: 2;
            color: #666666;
        }
    }
    .section3{
        position: relative;
        padding-top: 10.625rem;
        padding-bottom: 8.125rem;
        overflow: hidden;
    }
}

.dynamics{
    .section1{
        padding-top: 18.125rem;
        padding-bottom: 5.9375rem;
        border-bottom: .0625rem solid #babcbd;
        .etitle{
            font-size: 2rem;
            font-family: 'medium';
            margin-bottom: 1.25rem;
        }
        .title{
            font-size: 7.5rem;
            font-family: 'bold';
        }
    }
    .section2{
        padding-top: 5rem;
        padding-bottom: 6.875rem;
        .top{
            display: flex;
            background-color: #fff;
            margin-bottom: 5rem;
            transition: border-radius 0.4s;
            overflow: hidden;
            &:hover{
                border-radius: 1.5625rem;
            }
        }
        .top-img{
            width: 66.0714%;
            padding-top: 440 / 1400 * 100%;
            display: block;
            position: relative;
            flex-shrink: 0;
            img{
                position: absolute;
                top: 0;
                left: 0;
            }
        }
        .top-info{
            flex-grow: 1;
            width: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 2.875rem 38 / 1400 * 100%;
        }
        .top-title{
            font-size: 1.75rem;
            line-height: 2.5rem;
            font-family: 'bold';
        }
        .top-time{
            font-family: 'regular';
        }
        .list{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            &::after{
                width: 32.1428%;
                height: 0;
                content: '';
            }
        }
        .item{
            width: 32.1428%;
            background-color: #fff;
            margin-bottom: 1.5625rem;
            transition: transform 0.4s,border-radius 0.4s;
            overflow: hidden;
            &:hover{
                transform: translateY(-0.625rem);
                border-radius: 1.25rem;
            }
        }
        .item-img{
            width: 100%;
            padding-top: 338 / 450 * 100%;
            position: relative;
            img{
                position: absolute;
                top: 0;
                left: 0;
            }
        }
        .item-info{
            padding: 1.25rem 24 / 450 * 100% 1.8125rem;
        }
        .item-title{
            font-size: 1.25rem;
            line-height: 2rem;
            height: 4rem;
            margin-bottom: 3.5rem;
            font-family: 'bold';
        }
        .item-time{
            font-family: 'regular';
        }
    }
}